<template>
  <q-dialog v-model="show" persistent>
    <q-card v-drag class="dialog-content downtime-duration-detail" style="min-width: 1000px; max-height: 500px">
      <q-card-section class="dialog-title bg-primary" >
        <div class="text-center text-white dialog-title">
          <q-btn
            style="font-size: 18px;color: white"
            flat round dense
            class="iconfont icontubiao-67 white close-btn dialog"
            @click="$emit('close')"
          />
          <span class="font-size-16">
            停机时间明细
          </span>
        </div>
      </q-card-section>
      <q-card-section style="padding: 0" class="page-content">
        <q-table
          class="users-table scroll my-sticky-virt scroll-table stick-last-col myTable"
          :columns="tableColumns"
          :data="tableData"
          row-key="id"
          :pagination.sync="pagination"
          no-data-label="暂无数据"
          color="primary"
          :hide-bottom="tableData.length != 0"
          style="height: 300px;margin: 0"
        >
          <template v-slot:body-cell-work="props">
            <q-td>
              {{props.row.productName || '—'}} <span  v-if="props.row.productName !== '无'">（{{props.row.processNo || '—'}}-{{props.row.processName || '—'}}）</span>
            </q-td>
          </template>
          <template v-slot:body-cell-type="props">
            <q-td>
              {{props.row.type || '—'}}
            </q-td>
          </template>
          <template v-slot:body-cell-cause="props">
            <q-td>
              {{props.row.cause || '—'}}
            </q-td>
          </template>
          <template v-slot:body-cell-operatorName="props">
            <q-td>
              {{props.row.operatorName || '—'}}
            </q-td>
          </template>
          <template v-slot:body-cell-remark="props">
            <q-td>
              {{props.row.remark || '—'}}
            </q-td>
          </template>
          <template v-slot:body-cell-causeUpdateName="props">
            <q-td>
              {{props.row.causeUpdateName || '—'}}
            </q-td>
          </template>
          <template v-slot:body-cell-btn="props">
            <q-td>
              <q-btn flat color="primary" label="修改原因" class="table-flat-btn" @click="showEditDialog(props.row)"/>
            </q-td>
          </template>
          <template v-slot:no-data>
            <div class="full-width row flex-center font-size-14" style="color: #999">
              暂无数据
            </div>
          </template>
        </q-table>
      </q-card-section>
    </q-card>
    <!-- 异常明细 -->
    <edit-detail
      :show="editDetail.show"
      :data="editDetail.data"
      ref="editDetail"
      @getList="getList()"
      @close="editDetail.show = false"
    />
  </q-dialog>
</template>

<script>
import { getDowntimeDuration } from '../../../boot/status-monitor/machine'
import editDetail from './edit-detail'
import { date } from 'quasar'
import transformTime from './transform-time'

export default {
  name: 'downtime-duration-detail',
  components: {
    editDetail
  },
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    deviceId: {
      default: '',
      required: true
    },
    since: {
      default: '',
      required: true
    },
    before: {
      default: '',
      required: true
    }
  },
  data () {
    return {
      // 表格不分页
      pagination: {
        rowsPerPage: 0
      },
      // 表格列
      tableColumns: [
        { name: 'time', field: 'time', label: '时间', align: 'left' },
        { name: 'work', field: 'work', label: '作业', align: 'left' },
        { name: 'operatorName', field: 'operatorName', label: '停机人', align: 'left' },
        { name: 'type', field: 'type', label: '停机类型', align: 'left' },
        { name: 'cause', field: 'cause', label: '停机原因', align: 'left' },
        { name: 'roundTime', field: 'roundTime', label: '停机时长', align: 'left' },
        { name: 'remark', field: 'remark', label: '备注', align: 'left' },
        { name: 'causeUpdateName', field: 'causeUpdateName', label: '原因修改人', align: 'left' },
        { name: 'btn', field: 'btn', label: '操作', align: 'left' }
      ],
      tableData: [],
      editDetail: {
        show: false,
        data: null
      }
    }
  },
  methods: {
    showEditDialog (data) {
      this.editDetail.data = { ...data, deviceId: this.deviceId }
      this.editDetail.show = true
      this.$refs.editDetail.initData({ ...data, deviceId: this.deviceId })
    },
    // 获取列表数据
    getList () {
      if (this.deviceId && this.since && this.before) {
        getDowntimeDuration(this.deviceId, this.since, this.before, this.Enums.MACHINES_STATUS.HALTING.value).then(res => {
          res.data.forEach(o => {
            o.time = date.formatDate(new Date(o.time), 'YYYY-MM-DD HH:mm:ss')
            o.roundTime = transformTime.getDuration(o.duration)
            o.productName.length === 1 && o.productName.indexOf('-') === -1 ? '无' : o.productName
          })
          this.tableData = res.data
        }).finally(
          this.$emit('getDetailedCount')
        )
      } else {
        this.tableData = []
      }
      // console.log('加载数据')
    }
  },
  watch: {
    show: function (newVal) {
      // console.log(newVal)
      if (newVal) {
        this.getList()
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  >>>.q-table__bottom--nodata{
    min-height auto
    padding 6px 0 0
  }
</style>
